<template>
  <el-container>
    <el-header style="background-color: white;color:black">
      <h1 align="center">用户列表界面</h1>
    </el-header>
    <el-main>
      <!-- 用户表单 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="queryForm.userName" placeholder="输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户电话">
          <el-input v-model="queryForm.userTel" placeholder="输入用户电话"></el-input>
        </el-form-item>
        <el-form-item label="用户邮件">
          <el-input v-model="queryForm.userEmail" placeholder="输入用户邮件"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="queryForm.roleName" placeholder="请选择角色">
            <el-option label="超级管理员" value="admin"></el-option>
            <el-option label="普通管理员" value="simple"></el-option>
          </el-select>
        </el-form-item>
        <el-button style="margin-left: 20px;" type="success" size="primary" @click="loadData">查询用户</el-button>
        <template>
          <download-excel class="export-excel-wrapper" :data="list" :fields="json_fields" :header="title"
            name="用户列表.xls">
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button type="success" style="float: right;">导出</el-button>
          </download-excel>
        </template>
      </el-form>
      <!-- 表格组件-->
      <!-- :data 当前页集合-->
      <el-table :data="list" :row-key="rw" style="100%" @selection-change="selectVal">
        <!-- 列组件-->
        <!-- prop 对应当前页集合的对象属性 -->
        <el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>
        <el-table-column prop="userId" label="用户编号" width="100"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="100"></el-table-column>
        <el-table-column prop="userPwd" label="用户密码" width="100"></el-table-column>
        <el-table-column prop="userEmail" label="用户邮件" width="200"></el-table-column>
        <el-table-column prop="userTel" label="用户电话" width="200"></el-table-column>
        <el-table-column prop="roleName" label="用户角色" width="100"></el-table-column>
      </el-table>
      <!-- 分页组件-->
      <el-pagination @size-change="select" @current-change="selectPage" :current-page="queryForm.page"
        :page-sizes="[10,15,20]" :page-size="queryForm.row" :total="total" layout="sizes,prev,pager,next,jumper,total">
      </el-pagination>

    </el-main>
  </el-container>

</template>

<script>
  export default {
    name: "paperAdd",
    data() {
      return {
        title:"xx公司用户表格",
        list: [], //当前页集合
        totalPage: 0, //总页数
        total: 0, //总条数
        queryForm: { //查询表单
          page: 1,
          row: 10,
          userName: "",
          userTel: "",
          userEmail: "",
          roleName: ""
        },
        json_fields: {
          "用户编号":"userId",
          "用户名":"userName",
          "用户密码":"userPwd",
          "用户邮件":"userEmail",
          "用户电话":"userTel",
          "用户角色":"roleName"
        },
        // formData: { //用于增删改
        //   roleName: "",
        //   userEmail: "",
        //   userId: "",
        //   userName: "",
        //   userPwd: "",
        //   userTel: ""
        // },
        selectIds: [] //被选中表格元素的id
      }
    },
    methods: {
      loadData() { //加载数据
        var self = this;
        var http = this.$http.get("/user/userList", {
          params: this.queryForm
        });
        http.then(function(rs) {
          if (rs.data.code == 200) {
            self.list = rs.data.data.list;
            console.log(self.list);
            //总条数
            self.total = rs.data.data.total;
            //总页数
            self.totalPage = rs.data.data.totalPage;
          } else {
            self.list = [];
            self.total = 0;
          }
        })
      },
      select(row) { //分页下拉框选中触发的事件,row是当前选中条数
        this.queryForm.row = row;
        //刷新
        this.loadData();
      },
      selectPage(page) { //选中页码触发的事件,page就是选中的页码
        this.queryForm.page = page;
        //刷新
        this.loadData();
      },
      selectVal(val) { //表格的复选框选中触发的事件
        // console.log(val);
        this.selectIds = val;
      },
      rw(row) {
        //设置需要保留的数据
        return row.userId;
      },

    },
    mounted() {
      this.loadData();
    }
  }
</script>

<style>
</style>
